import { lazy, Suspense } from 'react'
import { Route, Switch, Redirect, Router } from 'react-router-dom'
import PrivateRoute from './components/PrivateRoute'
import history from '@/utils/history'
// #1
import Layout from '@/pages/Layout'
const Login = lazy(() => import('@/pages/Login'))
const NotFound = lazy(() => import('@/pages/NotFound'))
export default function App() {
  return (
    <Router history={history}>
      <div className='app'>
        {/* #2 */}
        <Suspense
          fallback={
            <div
              style={{
                textAlign: 'center',
                marginTop: 200,
              }}
            >
              loading...
            </div>
          }
        >
          <Switch>
            <Redirect exact from='/' to='/home' />
            <Route path='/login' component={Login}></Route>
            <PrivateRoute path='/home' component={Layout} />
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}
